<template>
    <div>
        <!-- 新增 -->
        <el-button size="small" @click="addUserHandler">新增</el-button>
        <!-- 表格 -->
        <el-table :data="news.list" style="width: 100%" size="small">
            <el-table-column type="index" label="序号" width="50"></el-table-column>
            <el-table-column prop="title" label="新闻标题" width="400" align="center"></el-table-column>
            <el-table-column prop="category.name" label="新闻分类" align="center"></el-table-column>
            <el-table-column prop="publishTime" label="发布时间" align="center" width="150">
                <template slot-scope="scope">
                    {{scope.row.publishTime | dateFormat}}
                </template>
            </el-table-column>
            <el-table-column prop="readTimes" label="阅读次数" align="center"></el-table-column>
            <el-table-column prop="status" label="状态" align="center"></el-table-column>
            <el-table-column prop="thumpUp" label="点赞次数" align="center"></el-table-column>
            <el-table-column label="操作" align="center" width="150">
                <template slot-scope="scope">
                    <el-link :underline="false" @click="editHandler(scope.row)">修改</el-link>
                    <el-link :underline="false" @click="deleteHandler(scope.row.id)">删除</el-link>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
            style="float:right;margin-top:1em"
            layout="total, prev, pager, next"
            @current-change="changeHandler"
            :current-page='params.page'
            :page-size='params.pageSize'
            :total="news.total">
        </el-pagination>

        <!-- 模态框 -->
        <el-dialog :title="title" :visible.sync="dialogVisible" width="50%">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="标题">
                    <el-input v-model="form.title"></el-input>
                </el-form-item>
                <el-form-item label="所属分类" >
                    <el-select v-model="form.categoryId" placeholder="请选择">
                        <el-option v-for="item in f_categories" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="资讯">
                    <Tinymce v-model="form.content" />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveHandler">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
// 导入富文本编辑器
import Tinymce from '@/components/Tinymce'
export default {
    // 注册组件
    components: {
        Tinymce
    },
    data() {
        return {
            form: {},
            dialogVisible: false,
            title:"发布新闻资讯",
            dataList:[],
            params: {
                page: 1,
                pageSize: 5
            }
        }
    },
    computed: {
        ...mapState("news",["news"]),
        ...mapState("category",["f_categories"])
    },
    created() {
        this.queryNews(this.params),
        // 查询所有栏目
        this.findAllCategory()
    },
    watch: {
        params: {
            handler:function() {
                this.queryNews(this.params)
            },
            deep: true
        }
    },
    methods: {
        ...mapActions("news",["queryNews","saveOrUpdateNews","deleteNew"]),
        ...mapActions("category",["findAllCategory"]),
        // 保存
        saveHandler() {
            this.saveOrUpdateNews(this.form).then(res => {
                this.dialogVisible = false
                this.queryNews(this.params)
            })
        },
        // 新增
        addUserHandler() {
            this.dialogVisible = true;
            this.form = {}
        },
        changeHandler(page) {
            this.params.page = page
        },
        // 修改
        editHandler(row) {
            this.dialogVisible = true
            this.form = JSON.parse(JSON.stringify(row))
        },
        // 删除
        deleteHandler(id) {
            this.deleteNew({id:id}).then(res => {
                this.queryNews(this.params)
                console.log(res,"res")
                if(res.status == 200) {
                    this.$notify({
                        title: '成功',
                        message: res.message,
                        type: 'success'
                    });
                }
            })
        }
    }
}
</script>